<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #data {
            width: 850px;
            border: 1px solid #000000;
            margin: 20px auto;
        }

        #data>p {
            display: flex;
        }

        #data>h5 {
            text-align: center;
        }

        #data>p>span {
            padding: 0 10px;
        }

        #prev,
        #next {
            cursor: pointer;
        }

        #nian {
            flex: 1;
            text-align: center;
        }

        #title {
            overflow: hidden;
            list-style: none;
            background: #ccc;
        }

        #title>li {
            float: left;
            width: 120px;
            height: 70px;
            line-height: 70px;
            text-align: center;
        }

        #date {
            overflow: hidden;
            list-style: none;
            background-color: skyblue;
        }

        #date>li {
            float: left;
            width: 114px;
            height: 60px;
            margin: 1px 1px;
            border: 2px solid rgba(0, 0, 0, 0);
            line-height: 60px;
            text-align: center;
            cursor: pointer;
        }

        #date>.hover:hover {
            border: 2px solid blueviolet;
        }

        .active {
            color: white;
            background-color: blue;
        }

        .text {
            display: block;
            font-size: 25px;
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <div id="data">
        <span class="text"></span>
        <p>
            <span id="prev">上一月</span>
            <span id="nian">2018</span>
            <span id="next">下一月</span>
        </p>
        <h5 id="yue">一月</h5>
        <ul id="title">
            <li>周日</li>
            <li>周一</li>
            <li>周二</li>
            <li>周三</li>
            <li>周四</li>
            <li>周五</li>
            <li>周六</li>

        </ul>
        <ul id="date">
        </ul>
    </div>
    <script>


        var date = new Date(); //当前时间 
        var yearD = date.getFullYear();//当前年份 
        var monthD = date.getMonth(); //当前月 
        var dayD = date.getDate(); //当前天 这保存的年月日 是为了 当到达当前日期 有对比 

        var t = setInterval(function () {
            formatDate();
        }, 1000)

        add(); //进入页面第一次渲染 

        // //当点击下一个月时 对当前月进行加1; 
        document.querySelector("#next").onclick = function () {
            date.setDate(33);
            add(); //重新执行渲染 获取去 改变后的 年月日 进行渲染; 
        };

        // //当点击上一个月时 对当前月进行减1; 
        document.querySelector("#prev").onclick = function () {
            date.setDate(0);
            add(); //重新执行渲染 获取去 改变后的 年月日 进行渲染; 
        };


        function formatDate() {
            var res = "";
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var week = date.getDay();
            var hours = date.getHours();
            hours = addzero(hours);
            var mins = date.getMinutes();
            mins = addzero(mins);
            var secs = date.getSeconds();
            secs = addzero(secs);
            var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            res += `现在是${year}年${month}月${day}号 ${arr[week]} ${hours}:${mins}:${secs}`;
            // res += "现在是" + year + "年" + month + "月" + day + "日" + arr[week] + " " + hours + ":" + mins + ":" + secs + "<br/>";
            document.querySelector(".text").innerHTML = res;
            // document.querySelector(".text").style.color = "red";
            // return res;
        }


        function add() {
            document.querySelector('#date').innerHTML = "";

            var year = date.getFullYear();//当前年份 
            var month = date.getMonth(); //当前月 
            var day = date.getDate(); //当前天 
            var arrM = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
            // 年月推到页面上
            document.querySelector('#nian').innerHTML = year + "年";
              // 利用月份0-11的特殊性，以其作为下标，获取键值
            document.querySelector('#yue').innerHTML = arrM[month];

            // 建空数组
            var res = '';

            // 将上月的天数放到res中
            var pre = preday(date);
            pre.forEach(function (item, m) {
                res += `<li style="color:#5F5F5F">${item}</li>`;
            })

            // console.log(res);
            // 将本月的天数放到res中
            var now = nowday(date);
            now.forEach(function (item, m) {
                // res += `<li>${item}</li>`;

                // 本月当前天与其他天数样式做区分
                if (year == yearD && month == monthD && item == dayD) {
                    res += `<li class="active">${item}</li>`;
                } else {
                    res += `<li class="hover">${item}</li>`;
                }
            })

            // console.log(res);

            //  // 将下月的天数放到res中
            for (var m = 1; m <= 42 - pre.length - now.length; m++) {
                res += `<li style="color:#5F5F5F">${m}</li>`;
            }

            // 将所有天数推到页面上
            document.querySelector("#date").innerHTML = res;
        }

        // 补0
        function addzero(x) {
            return x > 9 ? x : "0" + x;
        }


        // 获取当前月份天数
        function nowday(time) {
            var date = new Date(time);
            date.setDate(33);
            date.setDate(0);
            var arrlist = [];
            for (var m = 1; m <= date.getDate(); m++) {
                arrlist.push(m);
            }
            // console.log(arrlist);
            return arrlist;

        }

        // 获取上月天数
        function preday(time) {
            var date = new Date(time);
            date.setDate(0);
            var day = date.getDate()
            date.setDate(33);
            date.setDate(1);
            // console.log(day);
            var week = date.getDay();
            // console.log(week);


            if (week === 0) {
                week = 7;
            }

            var arrlist = [];
            for (var n = day - week + 1; n <= day; n++) {
                // 这里调星期几开头
                arrlist.push(n);
            }
            // console.log(arrlist);
            return arrlist;
        }
    </script>
</body>

</html>